import React, { useEffect, useState } from 'react'
import { HOME } from '../../axios'
import Swiper1 from './Swiper'
import { Swiper, Toast } from 'react-vant';
import './home.css'
import { useNavigate } from 'react-router-dom';
export default function Home() {
    const navigate = useNavigate()
    let [ banner,setBanner ] = useState([])
    let [ channel,setChannel ] = useState([])
    let [ brandList,setBrandList] = useState([])
    let [ newGoodsList,setNewGoodsList] = useState([])
    let [ hotGoodsList,setHotGoodsList] = useState([])
    let [ topicList,setTopicList] = useState([])
    let [ categoryList,setCategoryList] = useState([])
    useEffect(() => {
        HOME().then(res => {
            console.log(res);
            if(res.status === 200){
                setBanner(res.data.data.banner)
                setChannel(res.data.data.channel)
                setBrandList(res.data.data.brandList)
                setNewGoodsList(res.data.data.newGoodsList)
                setHotGoodsList(res.data.data.hotGoodsList)
                setTopicList(res.data.data.topicList)
                setCategoryList(res.data.data.categoryList)
            }
        })
    },[])
  return (
    <div className='home-box'>

            <div className='searchbox'>
                <div className='search' onClick={() => navigate('/search') }>
                    <span>请输入搜索关键字</span>
                </div>
            </div>

        {banner.length > 0 && <Swiper1 banner={banner}></Swiper1>}

        {channel.length > 0 && <ul className='home-ul'>
            {
                channel.map(item => {
                    return <li key={item.id} className='home-li' onClick={() => navigate('/channel/'+item.id)}>
                        <img src={item.icon_url} alt="" />
                        <p>{item.name}</p>
                    </li>
                })
            }    
        </ul>}

        {brandList.length > 0 && <div>
            <div className='brandList-title'>品牌制造商直供</div>    
            <ul className='home-brandList-ul'>
                {
                    brandList.map(item => {
                        return <li className='home-brandList-li' key={item.id}>
                            <img src={item.pic_url} alt="" />
                            <p className='home-brandList-name'>{ item.name }</p>
                            <p className='home-brandList-pri'> ￥{ item.floor_price }.00元 </p>
                        </li>
                    })
                }
            </ul>
        </div>}

        {newGoodsList.length > 0 && <div>
            <div className='newGoodsList-tit'>周一周四·新品首发</div>
            <ul className='newGoodsList-ul'>
                {
                    newGoodsList.map(item => {
                        return <li className='newGoodsList-li' key={item.id} onClick={() => navigate('/detail/'+item.id)}>
                            <img src={item.list_pic_url} alt="" />
                            <p className='newGoodsList-name'>{ item.name }</p>
                            <p className='newGoodsList-price'>￥{item.retail_price}.00元</p>
                        </li>
                    })
                }
            </ul>
        </div>}

        {hotGoodsList.length > 0 && <div>
            <div className='hotGoodsList-tit'>人气推荐</div>    
            <ul className='hotGoodsList-ul'>
                {
                    hotGoodsList.map(item => {
                        return <li key={item.id} className='hotGoodsList-li' onClick={() => navigate('/detail/'+item.id)}>
                            <img src={item.list_pic_url} alt="" />
                            <div>
                                <p className='hotGoodsList-name'>{item.name}</p>
                                <p className='hotGoodsList-bri'>{item.goods_brief}</p>
                                <p className='hotGoodsList-pri'>￥{item.retail_price}.00元</p>
                            </div>
                            
                        </li>
                    })
                }
            </ul>
        </div>}

        {topicList.length > 0 && <div>
            <div className='hotGoodsList-tit'>专题精选</div>    
            <Swiper slideSize={80} className='hotGoodsList-swi'>
                {
                    topicList.map(item => {
                        return <Swiper.Item key={item.id} className='hotGoodsList-item'>
                            <img src={item.item_pic_url} alt="" />
                            <p className='hotGoodsList-name'>{item.title}</p>
                            <p className='hotGoodsList-sub'>{item.subtitle}</p>
                        </Swiper.Item>
                    })
                }
            
            </Swiper>
        </div>}

        {categoryList.length > 0 && <div>
            {
                categoryList.map(item => {
                    return <div key={item.id}>
                        <div className='categoryList-tit'>{item.name}</div>
                        <ul className='categoryList-ul'>
                            {
                                item.goodsList.map(cl => {
                                    return <li className='categoryList-li' key={cl.id}  onClick={() => navigate('/detail/'+cl.id)}>
                                        <img src={cl.list_pic_url} alt="" />
                                        <p className='categoryList-name'>{cl.name}</p>
                                        <p className='categoryList-price'>￥{cl.retail_price}.00元</p>
                                    </li>
                                })
                            }
                        </ul>
                    </div>
                })
            }    
        </div>}

    </div>
  )
}
